<div nz-row [nzGutter]="16" [nzType]="'flex'" [nzJustify]="'flex-start'" [nzAlign]="'middle'"  style="margin-top: 20px">
    <div nz-col [nzXs]="24" [nzSm]="10" [nzMd]="8">
        <nz-card nzNoPadding>
        <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
            <div nz-col [nzSpan]="12" class="text-center text-red">
                <!--<img class="p-sm" src="./assets/img/1.png">-->
                <nz-upload class="avatar-uploader p-sm"
                           nzAction="{{uploadUrl}}"
                           [nzShowUploadList]="false"
                           [nzBeforeUpload]="beforeUpload"
                           (nzChange)="handleChange($event)">
                    <i *ngIf="!avatarUrl" class="anticon anticon-plus avatar-uploader-trigger"></i>
                    <img *ngIf="avatarUrl" [src]="avatarUrl" class="avatar">
                    <!--<img src="./assets/img/1.png" class="avatar">-->
                </nz-upload>
            </div>
            <div nz-col [nzSpan]="12" class="py-md">
                <h3 class="h3">{{username}}</h3>
                <i class="fa fa-users fa-1x"></i>
                <p class="text-grey">可用积分 : 70分</p>
                <div class="link">
                    <p class="text-blue text-link">积分明细</p>
                    <p class="text-blue text-link">积分充值</p>
                </div>
            </div>
        </div>
        </nz-card>
    </div>
    <div nz-col [nzXs]="24" [nzSm]="10" [nzMd]="8">
        <nz-card nzNoPadding>
            <div nz-row >
                <div nz-col [nzSpan]="12" class="border-right-1 border-bottom-1">
                    <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
                        <div nz-col [nzSpan]="10" class="text-center  text-pink">
                            <i class="icon-star fa-2x" style="font-size: 2.5em"></i>
                        </div>
                        <div nz-col [nzSpan]="14" class="py-md">
                            <h3 class="h3">10.00</h3>
                            <p class="text-grey">账户余额</p>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="12" class="border-bottom-1">
                    <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
                        <div nz-col [nzSpan]="10" class="text-center">
                            <i class="fa fa-code-fork fa-2x" style="font-size: 2.5em"></i>
                        </div>
                        <div nz-col [nzSpan]="14" class="py-md">
                            <h3 class="h3">100.00</h3>
                            <p class="text-grey">冻结资金</p>
                        </div>
                    </div>
                </div>
            </div>
            <div nz-row>
                <div nz-col [nzSpan]="12" class="border-right-1">
                    <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
                        <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
                            <div nz-col [nzSpan]="24" class="py-md-2">
                                <h4 class="h4">提现</h4>
                            </div>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="12">
                    <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
                        <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'">
                            <div nz-col [nzSpan]="24" class="py-md-2">
                                <p class="text-grey">(冻结资金不能提现)</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </nz-card>
    </div>
</div>
<div class="business-title-container" nz-col nzXs="24" nzSm="24">
    <div class="business-title">我的合作</div>
    <div class="business-title-more">更多 >></div>
</div>
<div nz-row nzGutter="16">
    <!--宽屏显示为表格-->
    <div nz-col nzXs="24" nzSm="24" class="padding-left-right-5px display-none-smaller-Sm">
        <nz-card [nzBordered]="false" nzNoPadding class="business-card">
            <div class="list-head-container">
                <div class="list-head-title">赞助标题</div>
                <div class="list-head-word" style="width:15%">时间</div>
                <div class="list-head-word" style="width:8%">合作人</div>
                <div class="list-head-word" style="width:15%">企业</div>
                <div class="list-head-word">部门</div>
                <div class="list-head-word">联系方式</div>
                <div class="list-head-word" style="width:10%">金额</div>
                <div class="list-head-word" style="width:7%">操作</div>
            </div>
            <div nz-row [nzType]="'flex'" [nzJustify]="'center'" [nzAlign]="'middle'"
                 class="py-sm bg-grey-lighter-h point border-top display-none-smaller-Sm"
                 *ngFor="let item of todoData">
                <div class="business-list-container">
                    <div class="list-content-title">
                        <div nz-col [nzSpan]="22">
                            <p class="list-topic overFlow">{{item.title}}</p>
                        </div>
                    </div>
                    <div class="list-content-time-container" style="width:15%">
                        <div class="list-content-time">
                            {{item.startDate}}
                        </div>
                        <div class="list-content-time">
                            ~
                        </div>
                        <div class="list-content-time">
                            {{item.endDate}}
                        </div>
                    </div>
                    <div class="list-content-word" style="width:8%">
                        {{item.copName}}
                    </div>
                    <div class="list-content-word" style="width:15%">
                        {{item.company}}
                    </div>
                    <div class="list-content-word">
                        {{item.department}}
                    </div>
                    <div class="list-content-word">
                        {{item.phone}}
                    </div>
                    <div class="list-content-word" style="width:10%">
                        ￥ {{item.amount}}
                    </div>
                    <div class="list-content-word" style="width:7%">
                        解约
                    </div>
                </div>
            </div>
        </nz-card>
    </div>
    <!--窄屏显示为卡片-->
    <div nz-col nzXs="24" class="padding-left-right-5px list-to-card-container display-none-bigger-Sx">
        <nz-card [nzBordered]="false" nzNoPadding class="business-card">
            <ng-container *ngFor="let item of todoData">
                <div class="list-to-card-one border-bottom hover">
                    <div class="list-to-card-title">
                            <p class="list-topic overFlow">{{item.title}}</p>
                    </div>
                    <div class="list-to-card-content">
                        <div class="list-to-card-word">{{item.company}}</div>
                        <div class="list-to-card-word">{{item.startDate}}~{{item.endDate}}</div>
                        <div class="list-to-card-word">{{item.phone}}</div>
                        <div class="list-to-card-word" style="color: deeppink;font-size: 1.5rem">￥{{item.amount}}</div>
                    </div>
                </div>
            </ng-container>
        </nz-card>
    </div>
</div>
